<template>
    <div>
        <el-form :model="form">
            <el-form-item label="名称" prop="sensorName">
                <el-input v-model="form.sensorName" disabled/>
            </el-form-item>
        </el-form>

        <el-row :gutter="32">
            <el-col :xs="24" :sm="24" :lg="12" v-for="(item, index) in chartList" :key="index">
                <div style="display: flex; flex-direction: column; margin-bottom: 20px; align-items: center">
                    <component :is="item.componentName" :height="'300px'" :value="'9999'"></component>
                    <div style="margin-top: 10px; text-align: center">{{ item.name }}</div>
                    <el-link v-if="item.componentName===form.chart" style="margin-top: 10px" type="primary"
                             :underline="false"
                    >已选择
                    </el-link>
                    <el-link v-else style="margin-top: 10px" type="primary" :underline="false"
                             @click="chooseChart(item)"
                    >选择
                    </el-link>
                </div>
            </el-col>
        </el-row>

    </div>
</template>

<script>

import { changeInfo } from '@/api/equipment/sensor'
import gauge from '@/views/common/chart/Gauge.vue'
import temperature from '@/views/common/chart/Temperature.vue'
import lcd from '@/views/common/chart/Lcd.vue'

export default {
    name: 'index',
    components: {
        gauge,
        temperature,
        lcd
    },
    props: {
        sensor: {
            type: Object
        }
    },
    data() {
        return {
            form: {},
            chartList: [
                {
                    'componentName': 'lcd',
                    'name': '默认',
                    'value': '0'
                },
                {
                    'componentName': 'gauge',
                    'name': '转速表1',
                    'value': '1'
                },
                {
                    'componentName': 'temperature',
                    'name': '温度计1',
                    'value': '2'
                }
            ]
        }
    },
    created() {
        this.form = this.sensor
    },
    methods: {

        chooseChart(item) {
            this.form.chart = item.componentName
            console.log('图表', item.componentName)

            let obj = {
                sensorId: this.form.sensorId,
                chart: item.componentName
            }
            changeInfo(obj).then(response => {
                this.$message.success('成功')
            })
        }
    }
}
</script>

<style scoped>

</style>
